<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box form">
			<view class="line acea-row">
				<view class="tit"> 姓名 </view>
				<input type="text" v-model="list.user_name" placeholder="请输入姓名" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 性别 </view>
				<u-radio-group placement="row" @change="gender_change" activeColor="#347DFE">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in gender_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line acea-row">
				<view class="tit"> 手机号 </view>
				<input type="number" v-model="list.user_mobile" placeholder="请输入手机号" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 地区 </view>
				<input type="number" v-model="list.user_city" placeholder="请选择城市" placeholder-class="psc" disabled
					@tap="handleTap('picker3')">
			</view>
			<view class="line acea-row">
				<view class="tit"> 身份证 </view>
				<input type="idcard" v-model="list.user_idcard" placeholder="请输入身份证" placeholder-class="psc">
			</view>
		</view>
		
		<view class="btn-box">
			<ysxy @radioCheck="radioCheck"></ysxy>
			<view class="btn" @click="submit">提交支付</view>
		</view>

		<!-- 城市 -->
		<lb-picker ref="picker3" v-model="value3" mode="multiSelector" :list="address_list" :level="3"
			:dataset="{ name: 'label3' }" @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
		</lb-picker>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import areaData from '@/common/area-data-min.js';
	import LbPicker from '@/components/lb-picker';
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '线下培训填写信息',
					'color': false,
				},

				gender_list: [{
					name: '男',
					value: '男',
				}, {
					name: '女',
					value: '女',
				}],
				list: {
					user_name: '',
					user_mobile: '',
					user_sex: '',
					user_idcard: '',
					user_city: '',
				},
				service_id: '',
				sale_price: '',
				address_list: areaData,
				value3: [],
				label3: '',
				isRead: false,
			};
		},
		onLoad(option) {
			this.service_id = option.service_id;
			this.sale_price = option.price;
			console.log(this.sale_price);



		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},

		methods: {
			// 创建订单
			async createOrder() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/order/createOrder',
					data: {
						openid: uni.getStorageSync('openid'),
						type: 2,
						service_id: that.service_id,
						user_name: this.list.user_name,
						user_sex: this.list.user_sex,
						user_mobile: this.list.user_mobile,
						user_idcard: this.list.user_idcard,
						user_city: this.list.user_city,
					}
				})
				console.log("生成订单", res.data.data);
				var order_id = res.data.data.order_id;
				var service_name = res.data.data.service_name;
				if (res.data.status == 200) {
					uni.navigateTo({
						url: '/pages/user/payment?order_id=' + order_id + '&service_name=' + service_name +
							'&price=' + this.sale_price
					})
				}

			},
			// 性别
			gender_change: function(name) {
				console.log('gender', name);
				this.list.user_sex = name;
			},
			// 地区
			handleTap(picker) {
				this.$refs[picker].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了

				console.log('confirm::', e.item.map(item => item.label).join('-'))
				this.list.user_city = e.item.map(item => item.label).join('-')

			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			radioCheck() {
				this.isRead = true;
			},
			submit() {
				if (!this.isRead) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读协议并同意'
					})
				} else {
					this.createOrder()
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.box {
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 30rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line .tit {
		color: #000;
		width: 86rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line .cont {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line .cont {
		color: red;
	}

	.form .line textarea {
		width: 100%;
		height: 130rpx;
		border: 1px solid #D9D9DA;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}

	.btn-box {
		padding-top: 40rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
</style>
